<template>
  <div class="app-login" @keyup.enter="onSubmit">
    <div class="login-main">
      <h3 class="login-title mb-5">{{ platformName }}</h3>
      <!-- <p class="text-center text-muted mb-5">农业信用担保贷款好帮手</p> -->

      <div class="login-form">
        <el-form :model="loginForm" :rules="rules" ref="loginForm">
          <el-form-item prop="loginName">
            <el-input placeholder="用户名/手机账号" size="lager" v-model.trim="loginForm.loginName">
              <i slot="prefix" class="el-input__icon fa fa-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="loginSecret">
            <el-input
              type="password"
              placeholder="密码"
              size="lager"
              v-model.trim="loginForm.loginSecret"
            >
              <i slot="prefix" class="el-input__icon fa fa-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              class="btn-block"
              style="height: 42.5px"
              @click="onSubmit"
              :loading="loginLoading"
            >
              登 录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <p class="login-copyright">
      <small v-html="TEXT_COPYRIGHT"></small>
    </p>
  </div>
</template>
<script>
import { PLATFORM_NAME, PLATFORM_ORG } from '@/cadmin/plugins/constant'
import { convertLoginErrMsg } from '@/common/plugins/tools/convert'
import { TEXT_COPYRIGHT } from '@/common/plugins/constant'

export default {
  components: {},
  props: {},
  data() {
    return {
      TEXT_COPYRIGHT,
      platformName: PLATFORM_NAME,
      loginForm: {
        loginName: '',
        loginSecret: '',
      },
      rules: {
        loginName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        loginSecret: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      loginLoading: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onSubmit() {
      // 登录验证
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.postLogin()
        } else {
          this.$message.error('请输入用户名或密码！')
        }
      })
    },

    postLogin() {
      // 登录请求
      this.loginLoading = true
      this.$store
        .dispatch('login', {
          data: this.loginForm,
          validator: info => PLATFORM_ORG.includes(info.clientOrgClass),
        })
        .then(() => {
          this.$message({ message: '登录成功', type: 'success', showClose: true, duration: 3000 })
          this.$router.replace('/')
        })
        .catch(err => {
          this.$message.error(convertLoginErrMsg(err))
        })
        .then(() => {
          this.loginLoading = false
        })
    },
  },
}
</script>
<style scoped lang="scss">
.app-login {
  padding-top: 5rem;
  min-height: 100vh;
  position: relative;
  /* @include gradient-radial(
    lighten($primary, 55%),
    lighten($primary, 40%),
    ellipse
  ); */
}

.login-main {
  margin: 0 auto;
  width: 380px;
  padding: 2rem 3rem;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  border: 1px solid $gray-300;
  box-shadow: 0 0 4px $gray-400;
}

.login-title {
  font-size: 24px;
  color: $gray-700;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
}

.login-copyright {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  margin-bottom: 0;
  margin-top: 5rem;
  text-align: center;
  color: $gray-600;
  z-index: 2;
}
</style>
